<template>
  <div class="cartcontrol">
    <transition name="showMinus">
      <span v-show="food.count > 0" @click.stop="deleteFoodFunc" class="deleteFood icon-remove_circle_outline "></span>
    </transition>
    <span v-show="food.count > 0" class="countFood">{{food.count}}</span>
    <span @click.stop="addFoodFunc" class="addFood icon-add_circle"></span>
  </div>
</template>

<script type="text/ecmascript-6">
  import Vue from 'vue'
  export default{
    name:'cartcontrol',
    props:{
      food:{
        type:Object
      }
    },
    methods:{
      deleteFoodFunc() {
        if(this.food.count > 0){
          this.food.count --;
        }
      },
      addFoodFunc() {
        if (this.food.count){
          this.food.count ++;
        }
        else{
          Vue.set(this.food,'count',1);
        }
        this.$emit('addFoodEmit',this.food);
      }
    }

  }
</script>

<style rel="stylesheet/scss" lang="scss">
  @import "../../common/icon.css";
  .showMinus-enter{
    transform: translate3d(24px,0,0) rotate(180deg);
    opacity: 0;
  }
  .showMinus-enter-active{
    transition: all 0.6s ease;
  }
  .showMinus-leave-active{
    transform: translate3d(24px,0,0) rotate(180deg);
    opacity: 0;
    transition: all 0.6s ease;
  }
  .cartcontrol{
    display: inline-block;
    .deleteFood, .addFood{
      display: inline-block;
      font-size: 24px;
      color: rgb(0,160,220);
      line-height: 24px;
    }

    .countFood{
      display: inline-block;
      width: 24px;
      height: 24px;
      font-size: 10px;
      color: rgb(147,153,159);
      line-height: 24px;
      text-align: center;
      vertical-align: top;
    }
  }


</style>
